<template>
  <div class="block">
    <!--    <span class="demonstration">Use value-format</span>-->
    <div class="date-picker-container">
      <div class="demonstration">开始时间：</div>
      <el-date-picker
          v-model="beginT"
          type="datetime"
          placeholder=beginT
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
      />
      <div style="margin-left: 50px" class="demonstration">结束时间：</div>
      <el-date-picker
          v-model="endT"
          type="datetime"
          placeholder="Pick a Date"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
      />
    </div>
  </div>
</template>

<script>
import {ref} from "vue";

export default {
  setup() {
    const beginT = ref('');
    const endT = ref('');

    // 获取当前日期
    const currentDate = new Date();

    // 设置endT为前一天
    const previousDay = new Date(currentDate);
    previousDay.setDate(currentDate.getDate() - 1);
    endT.value = previousDay.toISOString().split('T')[0];

    // 设置beginT为一个月前的一天
    const previousMonthDay = new Date(currentDate);
    previousMonthDay.setMonth(currentDate.getMonth() - 1);
    previousMonthDay.setDate(currentDate.getDate() - 1);
    beginT.value = previousMonthDay.toISOString().split('T')[0];

    return {
      beginT,endT
    }
  }
}
</script>

<style scoped>
.date-picker-container {
  display: flex;
  flex-direction: row;
  align-items: center;
}
</style>
